<template>
  <div class="department">
    <a-card class="general-card">
      <a-row :gutter="15">
        <a-col :span="4">
          <tree-search :placeholder="请输入分类名称" :tree-data="treeData" @go-search="goSearch"></tree-search>
        </a-col>
        <a-col :span="20">
          <FormHeader v-if="showSearchBar" :collection="collection" @tap-date="tapDate"></FormHeader>
          <formButtonGroup
            v-model:columns="columns"
            v-model:size="size"
            :config="config"
            :search-bar="searchBar"
            @refresh="init"
            @change-search-bar="changeSearchBar"
          />
          <a-table
            row-key="id"
            :loading="loading"
            :pagination="pagination"
            :columns="columns"
            :data="data"
            :bordered="false"
            :size="size"
            @page-change="handlePageChange"
            @page-size-change="handlePageSizeChange"
          >
          </a-table>
        </a-col>
      </a-row>
    </a-card>
    <a-modal v-model:visible="editVisible" title="编辑" title-align="start" @ok="handleOk" @cancel="handleCancel">
      <EditForm :gathering="collection"></EditForm>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { toRefs } from 'vue';
import importConfig from './inventory.ts';
import FormHeader from '@com/formHeader/formHeader.vue';
import formButtonGroup from '@com/formButtonGroup/formButtonGroup.vue';
import EditForm from '@com/editForm/editForm.vue';
import TreeSearch from '@com/treeSearch/treeSearch.vue';

export default {
  name: 'InventoryDom',
  components: {
    TreeSearch,
    FormHeader,
    formButtonGroup,
    EditForm,
  },
  setup() {
    const {
      base,
      collection,
      data,
      opArticleNumber,
      init,
      tapDate,
      handlePageChange,
      handlePageSizeChange,
      edit,
      goSearch,
      changeSearchBar,
    } = importConfig();
    init();
    return {
      ...toRefs(base),
      collection,
      data,
      opArticleNumber,
      init,
      tapDate,
      handlePageChange,
      handlePageSizeChange,
      edit,
      goSearch,
      changeSearchBar,
    };
  },
};
</script>

<style scoped lang="less"></style>
